<template>
  <div>
    <!-- 标题 -->
    <div class="titles">
      <h2>学习成果转换</h2>
      <span>选修课学分：{{ user.credit }}</span>
      <span>成果累计积分：{{ user.scores }}</span>
    </div>
    <hr class="underline">


    <div class="tables" id="margins">
      <el-button class="buttons" type="primary" @click="dialogFormVisible = true">转换申请</el-button>
      <!-- 申请表单 -->
      <el-dialog class="dialogs" title="申请" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" :before-close="handleClose">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="学号" :label-width="formLabelWidth">
            <el-input v-model="form.s_number" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="学习成果积分" :label-width="formLabelWidth">
            <el-input v-model="form.scores" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="申请理由" :label-width="formLabelWidth" prop="describe">
            <el-input type="textarea" :rows="6" v-model="form.describe" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false, cancel()">取 消</el-button>
          <el-button type="primary" v-if="restart" @click="check('form')">重新申请</el-button>
          <el-button type="primary" v-else @click="check('form')">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 数据表格 -->
      <el-table :data="tData" highlight-current-row border>
        <el-table-column type="index" width="50" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="s_number" label="学号" align="center">
        </el-table-column>
        <el-table-column prop="describe" label="描述" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link type="primary" v-if="scope.row.outcome == 1 || scope.row.outcome == 0" @click="getLink(scope.row)">{{
              scope.row.describe }}</el-link>
            <span v-else>{{ scope.row.describe }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="subTime" label="申请时间" align="center">
        </el-table-column>
        <el-table-column prop="reason" label="驳回理由" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.outcome == 0">{{ scope.row.reason }}</span>
            <span v-else-if="scope.row.outcome == 1" style="color:#ccc;">暂无</span>
            <span v-else-if="scope.row.outcome == 2" style="color:#ccc;">已通过</span>
          </template>
        </el-table-column>
        <el-table-column prop="outcome" label="申请状态" align="center">
          <template slot-scope="scope">
            <span v-show="scope.row.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
            <span v-show="scope.row.outcome == 1">审批中</span>
            <span v-show="scope.row.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页封装 -->
      <Pagination :datas="tableData" @pageChange="pageChange"></Pagination>

    </div>



  </div>
</template>

<script>

import { getInfo } from "@/api/user"
import { convert, postAchievement, modify } from '@/api/student/achievementAPI'
import Pagination from '@/components/Pagination/pagination.vue'
export default {
  components: {
    // 分页组件
    Pagination
  },
  data() {
    return {
      //用户信息
      user: {},
      // 数据表格
      tableData: [],
      // 分页之后的表格数据
      tData: [],

      // 每条数据的id
      sid: '',

      //表单数据
      form: {
        s_number: '',
        credit: '',
        describe: "",
        subTime: '',
        status: 1, // 转换
        outcome: 1   // 1 审核
      },

      restart: false, // 确定按钮切换
      dialogFormVisible: false, //表单是否显示
      formLabelWidth: '100px',

      //非空校验
      rules: {
        describe: [
          { required: true, message: '请填写描述信息', trigger: 'blur' }
        ]
      }

    }
  },

  created() {


    // 用户信息方法
    this.users()
  },

  methods: {

    // 用户信息
    users() {
      getInfo().then(res => {
        this.user = res.data;
        this.form.scores = this.user.scores
        this.form.s_number = this.user.username
        this.datas();
      })
    },

    // 表格数据
    datas() {
      const table = {
        s_number: this.user.username,
        status: 1
      }
      convert(table).then(res => {
        this.tableData = res.data
        console.log("tableData", this.tableData);
      })
    },

    //分页 
    pageChange(data) {
      this.tData = data
    },

    // 数据校验提交
    check(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("校验成功");
          if (this.sid) {
            console.log("进入修改方法");
            this.submitModify();
            this.sid = '';   // 销毁 id
            this.restart = false // 关闭重新申请

          } else {
            console.log("进入提交方法");
            this.submit();
          }
          this.dialogFormVisible = false  // 关闭弹出表单

        } else {
          console.log('error submit!!');
          return false;
        }

      });
    },



    //表单提交方法
    submit() {
      // 给 申请表单中的 日期 添加当前日期
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = String(currentDate.getMonth() + 1).padStart(2, '0');
      const day = String(currentDate.getDate()).padStart(2, '0');
      this.form.subTime = `${year}-${month}-${day}`;
      console.log(this.form);

      postAchievement(this.form).then(res => {
        console.log('提交', res);
        if (res.code == 200) {
          const messages = "申请成功"
          this.open2(messages);
          this.datas();
          this.form.describe = ''
        } else {
          this.open3();
        }
      })
    },
    // 修改转换数据
    getLink(row) {
      this.restart = true  //打开重新申请
      this.dialogFormVisible = true  // 打开 将表单弹出

      this.form.describe = row.describe;
      this.sid = row.id
    },

    // 修改数据提交
    submitModify() {

      const modifyData = {
        id: this.sid,
        describe: this.form.describe,
        outcome: 1,
        status: this.form.status
      }

      console.log("modifydata", modifyData);
      modify(modifyData).then(res => {
        if (res.code == 200) {
          const messages = "修改成功"
          this.open2(messages);
          this.form.describe = ''
          this.datas();
          this.cancel();
        } else {
          this.open3();
        }
      })
    },


    // 取消按钮
    cancel() {

      this.$refs.form.resetFields();  // 清除校验提示
      if (this.form.describe) {
        this.form.describe = '';    // 消除默认值
      }

      this.restart = false  // 重新申请关掉
    },
    //  x 号按钮
    handleClose() {
      this.cancel();
      this.dialogFormVisible = false  // 打开 将表单弹出
    },
    //成功提示
    open2(messages) {
      this.$message({
        message: messages,
        type: 'success'
      });
    },
    //失败提示
    open3() {
      this.$message({
        message: '申请失败，请检查',
        type: 'success'
      });
    },

  }

}
</script>

<style scoped>
.buttons {
  margin: 10px 0;
}

.tables {
  margin: 10px 20px;
}


/* 弹出层样式 */
.dialogs {
  width: 80%;
  margin: auto;
}
</style>
